<template>
  <PageContainer>
    <dynamic-form :items="items" v-model="formData" @onFinish="submit">
      <template #action>
        <el-badge :value="12">
          <el-button>待审批</el-button>
        </el-badge>
        <el-button>批次打款EXCEL导出</el-button>
        <el-popover placement="left-start" :width="200" trigger="click" content="// TODO 待开发">
          <template #reference>
            <el-link type="primary">下载暂存区</el-link>
          </template>
        </el-popover>
      </template>
    </dynamic-form>
    <ElTableWithColumns
      :loading="loading"
      :data="tableData"
      :columns="columns"
      :pagerInfo="pagerInfo"
      :operateColProps="{ width: 120, fixed: false }"
    >
      <template #operate="{row}">
        <div>
          <el-button type="primary" plain size="small" @click="viewDetails(row)">详情</el-button>
          <el-button type="success" plain size="small">出款审批</el-button>
        </div>
      </template>
    </ElTableWithColumns>
  </PageContainer>
</template>

<script lang="ts" setup>
import DynamicForm from '@/components/DynamicForm/index.vue';
import useDictUtilsStore from '@/store/modules/dict_utils'
const { proxy } = getCurrentInstance() as ComponentInternalInstance

const { getlabel } = useDictUtilsStore()

const loading = ref(false)

const pagerInfo = reactive({
  pageSize: 10,
  total: 0,
  pageNum: 1
})

// TODO 接口报错
const data = useRequest('/payment/bill/paymentApprovalCount', 'get', {}, { immediate: true })


const tableData = ref([])

const columns = [
  {
    title: '创建时间',
    dataIndex: 'addTime',
    width: 160
  },
  {
    title: '批次号',
    dataIndex: 'name',
    width: 150
  },
  {
    title: '发放类型',
    dataIndex: 'no',
    width: 140
  },
  {
    title: '项目编号',
    dataIndex: 'no',
    width: 140
  },

  {
    title: '企业名称',
    dataIndex: 'no',
    width: 140
  },
  {
    title: '服务商名称',
    dataIndex: 'no',
    width: 140
  },
  {
    title: '产品编号',
    dataIndex: 'no',
    width: 140
  },
  {
    title: '支付渠道',
    dataIndex: 'no',
    width: 140
  },

  {
    title: '业务类型',
    dataIndex: 'no',
    width: 140
  },
  {
    title: '计费模式',
    dataIndex: 'no',
    width: 140
  },
  {
    title: '到账方式',
    dataIndex: 'no',
    width: 140
  },
  {
    title: '服务费承担方',
    dataIndex: 'no',
    width: 140
  },
  {
    title: '总金额（元）',
    dataIndex: 'no',
    width: 140
  },
  {
    title: '服务费（元）',
    dataIndex: 'no',
    width: 140
  },
  {
    title: '实际打款金额',
    dataIndex: 'busType',
    width: 160,
  },
  {
    title: '批次状态',
    dataIndex: 'busType',
    width: 160,
  },
  {
    title: '开票状态',
    dataIndex: 'busType',
    width: 160,
  },
  {
    title: '自定义流水号',
    dataIndex: 'busType',
    width: 160,
  },
  {
    title: '备注',
    dataIndex: 'busType',
    width: 160,
  },
]

const formData = ref({})
const submit = (data) => {
  query(data)
}

const router = useRouter()

const viewDetails = row => {
  router.push (`/settlementManagement/ApprovalDetail?id=${row.id}`)
}

const query = async (formData = {}) => {
  // loading.value = true
  const { response } = await useRequest('/payment/bill/paymentApprovalList', 'GET', {
  params: { ...formData }
}, { immediate: true })
  loading.value = false
  if (response.value?.code === 200) {
    tableData.value = response.value.rows
  }
}

onMounted(() => {
  query()
})



/**
 * 业务类型
*/
const businessTypeOptions = computed(() => {
  const list = proxy?.useDict("wxfe_bus_type").wxfe_bus_type
  return list
})

const items = computed(() => {
  return [
    { prop: 'addTime', label: '创建时间', valueType: 'date', fieldProps: { type: 'daterange', valueFormat: 'YYYY-MM-DD' } },
    { prop: 'batchOrderId', label: '批次号', valueType: 'input' },
    { prop: 'providerName', label: '服务商名称', valueType: 'input' },
    { prop: 'merchantName', label: '企业名称', valueType: 'input' },
    { prop: 'payPass', label: '支付渠道', valueType: 'input' },
    { prop: 'batchStatus', label: '批次状态', valueType: 'input' },
    { prop: 'batchOrderNo', label: '自定义流水号', valueType: 'input' },
  ]
})
</script>
